﻿@model DHQGHN.PM2.Models.Online.TemplateDataUploadClient
@using BotDetect.Web.UI.Mvc;
@{
    ViewBag.Title = "CollectHouseHoldInfo";
    ViewBag.Group = "Quản lý thông tin hộ";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
@Scripts.Render("~/bundles/jquery")
<script>
    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    };

    function ValidateNumber(e) {
        var evt = (e) ? e : window.event;
        var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    };

    function clickNgo() {
        var checkboxes = document.getElementById('cbNgo');
        if (checkboxes.checked) {
            $("#Ngo").removeAttr('disabled');
            $.ajax({
                type: 'get',
                url: '@Url.Action("GetNameByAdmUnitExtID")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',
                data: {
                    admUnitExtID: $("#DuongPho").val(),
                    level: '2'
                },
                success: function (states) {
                    $("#Ngo").empty();
                    $("#Ngo").append('<option value="' + '-1' + '">' +
                    '-- Chọn ngõ --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Ngo").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');
                    });
                },
                complete: function () {
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        } else {
            $("#Ngo").attr('disabled', 'disabled');
        }
    };

    function clickNgach() {
        var checkboxes = document.getElementById('cbNgach');
        if (checkboxes.checked) {
            $("#Ngach").removeAttr('disabled');
            $.ajax({
                type: 'get',
                url: '@Url.Action("GetNameByAdmUnitExtID")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',
                data: {
                    admUnitExtID: $("#Ngo").val(),
                    level: '3'
                },
                success: function (states) {
                    $("#Ngach").empty();
                    $("#Ngach").append('<option value="' + '-1' + '">' +
                    '-- Chọn ngách --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Ngach").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');
                    });
                },
                complete: function () {
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        } else {
            $("#Ngach").attr('disabled', 'disabled');
        }
    };

    function addHouseHold() {
        var admUnitExtID;
        var cbNgach = document.getElementById('cbNgach');
        var cbNgo = document.getElementById('cbNgo');
        if (cbNgach.checked) {
            admUnitExtID = $("#Ngach").val();
        } else if(cbNgo.checked){
            admUnitExtID = $("#Ngo").val();
        }
        var dataSend = {
            'HOUSEHOLD_ID': $('#HOUSEHOLD_0__HOUSEHOLD_ID').val(),
            'HOUSEHOLD_NAME': $('#HOUSEHOLD_0__HOUSEHOLD_NAME').val(),
            'NUM_OF_HH_MEMBER': $('#HOUSEHOLD_0__NUM_OF_HH_MEMBER').val(),
            'AREA_ID': $('#DiaBan').val(),
            'SURVEY_METHOD_ID': '03',
            'DELETED': '0'
        };
        var address = {
            'ADDRESS_ID': $('#HOUSEHOLD_0__HOUSEHOLD_ID').val(),
            'ADDRESS_DETAILS': $('#ADDRESS_0__ADDRESS_DETAILS').val(),
            'NAME': $('#ADDRESS_0__ADDRESS_DETAILS').val(),
            'ADM_UNIT_EXT_ID': admUnitExtID,
            'DELETED': '0'
        }
        var model = {
            'HOUSEHOLD': [dataSend],
            'ADDRESS': [address]
        };
        $("#divLoading").show();
        $('#btnSaveInfo').attr('disabled', true);
        var jqXHR = $.ajax({
            type: 'get',
            url: '@Url.Action("SaveInfo")', // we are calling json method
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            dataType: 'json',
            data: JSON.stringify(model),
            success: function (data, textStatus, jqXHR) {
                $("#divLoading").hide();
                $('#btnSaveInfo').removeAttr('disabled');
            },
            complete: function () {
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            }
        });
    };

    $(document).ready(function () {
        $.ajax({
            type: 'get',
            url: '@Url.Action("GetAreaByUsername")', // we are calling json method
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            dataType: 'json',

            success: function (states) {
                $("#DiaBan").append('<option value="' + '-1' + '">' +
            '-- Chọn địa bàn --' + '</option>');
                $.each(states, function (i, state) {
                    $("#DiaBan").append('<option value="' + state.Value + '">' +
                         state.Text + '</option>');
                });
            },
            complete: function () {
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            }
        });

        $("#DiaBan").change(function () {
            $("#TenDiaBan").val($("#DiaBan").val());
            $.ajax({
                type: 'get',
                url: '@Url.Action("GetADMNameByAreaID")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',
                data: {
                    areaID: $("#DiaBan").val(),
                    type: '2'
                },
                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#ADMUnitID").val(state.Value);
                        $("#ADMUnit").val(state.Text);
                    });
                },
                complete: function () {
                    $.ajax({
                        type: 'get',
                        url: '@Url.Action("GetADMNameByAreaID")', // we are calling json method
                        headers: {
                            'VerificationToken': '@GetAntiForgeryToken()'
                        },
                        dataType: 'json',

                        data: {
                            areaID: $("#DiaBan").val()
                            , type: '1'
                        },
                        success: function (states) {
                            $("#DuongPho").empty();
                            $("#DuongPho").append('<option value="' + '-1' + '">' +
                            '-- Chọn đường phố --' + '</option>');
                            $.each(states, function (i, state) {
                                $("#DuongPho").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');
                            });
                        },
                        complete: function () {
                        },
                        error: function (ex) {
                            alert('Failed to retrieve states.' + ex);
                        }
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        });

        $("#DuongPho").change(function () {
            $.ajax({
                type: 'get',
                url: '@Url.Action("GetNameByAdmUnitExtID")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',
                data: {
                    admUnitExtID: $("#DuongPho").val(),
                    level: '2'
                },
                success: function (states) {
                    $("#Ngo").empty();
                    $("#Ngo").append('<option value="' + '-1' + '">' +
                    '-- Chọn ngõ --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Ngo").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');
                        $("#cbNgo").removeAttr('disabled');
                    });
                },
                complete: function () {
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        });
        $("#Ngo").change(function () {
            $.ajax({
                type: 'get',
                url: '@Url.Action("GetNameByAdmUnitExtID")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',
                data: {
                    admUnitExtID: $("#Ngo").val(),
                    level: '3'
                },
                success: function (states) {
                    $("#Ngach").empty();
                    $("#Ngach").append('<option value="' + '-1' + '">' +
                    '-- Chọn ngách --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Ngach").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');
                        $("#cbNgach").removeAttr('disabled');
                    });
                },
                complete: function () {
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        });
    });

</script>

<div style="margin: 10px; font-family: Tahoma; padding-bottom: 10px">
    @using (Html.BeginForm("SaveInfo", "CollectHouseHoldInfo", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
    {
        <input id="ADMUnitID" type="hidden">
        <div style="background-color: lightgrey; text-align: center;">
            <label style="color: black; text-align: match-parent; font-size: 16px; padding: 5px;">A. Thông tin hộ dân cư</label>
        </div>

        <table style="width:100%; font-size: 16px;" border="1">
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px; width: 50%;">Phường/ xã, Quận/ huyện, Tỉnh/ thành</td>
                <td style="padding: 5px;">
                    <p>
                        @*@Html.TextBoxFor(m => m.HOUSEHOLD[0]., new { @class = "form-control txt-online ", @readOnly = true })*@
                        @Html.TextBox("ADMUnit", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Phường/ xã, Quận/ huyện, Tỉnh/ thành" })
                    </p>
                </td>
            </tr>
        </table>

        <table style="width:100%; font-size: 16px; margin-top: -1px" border="1">
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px; width: 50%;">Địa bàn điều tra</td>
                <td style="padding: 5px;">
                    <p>
                        <select id="DiaBan"></select>
                        @*@Html.TextBox("DiaBanDieuTra", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Địa bàn điều tra" })*@
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px;">Tên địa bàn điều tra</td>
                <td style="padding: 5px;">
                    <p>
                        @Html.TextBox("TenDiaBan", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Tên địa bàn điều tra", @readonly = "true" })
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px;">Mã hộ điều tra</td>
                <td style="padding: 5px;">
                    <p>
                        @Html.TextBoxFor(m => m.HOUSEHOLD[0].HOUSEHOLD_ID, new { @class = "form-control txt-online ", placeholder = "Mã hộ điều tra" })
                        @*@Html.TextBox("MaHoDieuTra", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Mã hộ điều tra" })*@
                    </p>
                </td>
            </tr>
        </table>

        <table style="width:100%; font-size: 16px; margin-top: 10px;" border="1">
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px;">Tên chủ hộ</td>
                <td style="padding: 5px;">
                    <p>
                        @Html.TextBoxFor(m => m.HOUSEHOLD[0].HOUSEHOLD_NAME, new { @class = "form-control txt-online ", placeholder = "Tên chủ hộ" })
                        @*@Html.TextBox("TenChuHo", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Tên chủ hộ" })*@
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px; width: 50%;">Số nhân khẩu thường trú trong hộ này</td>
                <td style="padding: 5px;">
                    <p>
                        @Html.TextBoxFor(m => m.HOUSEHOLD[0].NUM_OF_HH_MEMBER, new { @class = "form-control txt-online ", placeholder = "Số nhân khẩu trong hộ", onkeydown = "return ValidateNumber(event);", maxlength = "2" })
                        @*@Html.TextBox("NhanKhau", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Số nhân khẩu trong hộ", onkeydown = "return ValidateNumber(event);", maxlength = "2" })*@
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="border-right: 1px solid; padding: 5px;">Địa chỉ chi tiết của hộ</td>
                <td style="padding: 5px;">
                    <p>
                        @Html.TextBoxFor(m => m.ADDRESS[0].ADDRESS_DETAILS, new { @class = "form-control txt-online ", placeholder = "Địa chỉ chi tiết" })
                        @*@Html.TextBox("DiaChi", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Địa chỉ chi tiết" })*@
                    </p>
                </td>
            </tr>
        </table>

        <table style="width:100%; font-size: 16px; margin-top: -1px;" border="1">
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="padding: 5px;">Đường/ phố</td>
                <td style="padding: 5px;">
                    <p>
                        <select id="DuongPho"></select>
                        @*@Html.TextBox("DuongPho", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Đường/ phố" })*@
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="padding: 5px; width: 50%;"><input id="cbNgo" type="checkbox" name="vehicle" value="alley" onclick="clickNgo()" disabled ="disabled">Ngõ</td>
                <td style="padding: 5px;">
                    <p>
                        <select id="Ngo" disabled="disabled"></select>
                        @*@Html.TextBox("Ngo", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Ngõ/ hẻm" })*@
                    </p>
                </td>
            </tr>
            <tr style="margin-top: 10px; border: 1px solid;">
                <td style="padding: 5px;"><input id="cbNgach" type="checkbox" name="vehicle" value="gorge" onclick="clickNgach()" disabled="disabled">Ngách</td>
                <td style="padding: 5px;">
                    <p>
                        <select id="Ngach" disabled="disabled"></select>
                        @*@Html.TextBox("Ngach", "", new { @class = "form-control form-control-add  input-sm ", placeholder = "Ngách" })*@
                    </p>
                </td>
            </tr>
        </table>

        <div style="text-align: center; margin-top: 10px; ">
            <input name="bntLogin" type="button" id="btnSaveInfo" style="cursor: pointer" class="myButton btn btn-default" value="Lưu thông tin hộ" onclick="addHouseHold()" />
        </div>
    }
</div>